/*放置一些各个页面都会用到的公共样式*/

/* 去掉浏览器的默认样式 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*给整个页面加上背景图*/
/*当前html 的父元素,就是浏览器窗口,此处的100%意思是html
的高度和浏览器窗口一样高
当前body的父元素就是html,此处的100%意思就是html多高,
body就多高*/
html,body{
    height: 100%;
}
/*上背景图 并且设计好尺寸*/
body{

    background-image:url(../imge/rose6.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;


}

/*导航栏  宽度和高度 取决于你自己*/
.nav {
    width: 100%;
    height: 50px;
    /*背景 透明度 rgba 0.4 文字颜色白色*/
    background-color:rgba(51, 51, 51, 0.4);
    color: white;
    /*导航栏内部的内容都是一行排列的,就需要使用 flex 布局来进行操作*/
    display: flex;
    /* 实现子元素垂直居中的效果 */
    align-items: center;
}

/*设置导航栏里 图片的样式*/
.nav img{
    width: 200px;
    height: 40px;
    /*图片设置为圆矩形*/
    border-radius: 50%;
/*CSS中设置指定元素 外边距属性*/
    margin-left: 30px;
    margin-right: 10px;
}

.nav .spacer {
/*相对于父元素的宽度,如果父元素(.nav)宽度是1000px,此时spacer就是700px*/
    width: 60%;
}

.nav a{
    color: white;
    /*去下划线,内间距*/
    text-decoration: none;
    padding: 0 10px;
} 

/*接下来是版心相关的样式*/
.container{
    /*当前版心并不是和窗口一样宽的*/
   width: 1000px; 
   /*这个写法 减号 左右两侧 必须有空格 否则浏览器可能识别不了*/
   height: calc(100% - 50px);

   /*水平居中*/
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
}

.container .left{
    height: 100%;
    width: 200px;
    /* background-color: rgb(128, 0, 0); */
}

.container .right{
    height: 100%;
    width: 795px;
        background-color: rgba(255, 255,255, 0.8);
        border-radius: 10px;
    /* background-color:rgb(0,128, 0); */

    overflow: auto;/*给内部加上滚动条*/
}

/*接下来实现 card 部分的样式*/

.card{
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;/*边框圆角--*/

    /*通过这里的 内边距,就可以让狗头居中*/
    /*这里设置的30px,意思是四个方向都是 30px*/
    padding: 30px;
}

.card img{
    width: 140px;
    height: 140px;
}

.card h3{
    /*标题居中 再给10像素的 内边距*/
    text-align: center;
    padding: 10px;
}

.card a{
    /*a 默认是行内元素,行内元素的很多边距不生效,为了简单起见,直接设为块级元素*/
    display: block;/*设置为块级元素*/
    text-align: center;/*元素居中*/
    text-decoration: none;/*去掉下划线*/
    color: #999;
    padding: 10px;/*给10px 内边距 让它间隔大一点*/
}

.card .counter{
    display: flex;/*弹性布局*/
    justify-content: space-around;/*上下两部分被空白环绕*/
    padding: 5px;
}

 